<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Minio测试后端上传</title>
    <script src="js/vue.js"></script>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="app">
    <form @submit.prevent="uploadFile">
        <div style="margin-top: 30px">
            <label>
                文件
                <input type="file" @change="fileChange">
            </label>
        </div>
        <button type="submit" v-show="file != null">上传文件</button>
    </form>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                file: null,
            };
        },
        methods: {
            /**
             * 选择文件
             */
            fileChange(event) {
                this.file = event.target.files[0]
            },
            uploadFile() {
                if (!this.file) {
                    alert('请选择一个文件');
                    return;
                }

                const formData = new FormData();
                formData.append("bucketName", "demo")
                formData.append("file", this.file)

                $.ajax({
                    type: "post",
                    url: "http://localhost:9989/oss/upload",
                    data: formData,
                    processData: false, // 不要处理发送的数据
                    contentType: false, // 不设置 Content-Type 请求头
                    success: (response) => {
                        alert("上传成功")
                    },
                    error: (e) => {
                        alert("上传失败")
                    }
                })
            },
        }

    });

</script>
</body>
</html>
